<template>
  <div id="app">
    <generalEditTable v-bind="generalEdit" ref="generalEdit" />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    generalEditTable: () => import('./components/GeneralEditTable.vue')
  },
  data() {
    return {
      generalEdit: {
        title: '用户',
        // 筛选数据
        filterOption: {
          formOption: {
            inline: true,
            labelPosition: 'right',
            formItemOption: [
              {key: 'search_word', label: '关键词:', type: 'TextInput', clearable: true}
            ]
          }
        },
        //  添加弹窗
        addDialogOption: {
          addFunction: this.addApi,
          width: '520px',
          formOption: {
            labelPosition: 'right',
            formItemOption: [
              {key: 'u_name', label: '用户名:', type: 'TextInput',rules: [{ required: true, message: '用户名不能为空', trigger: ['blur', 'change'] }],},
              {key: 'nick_name', label: '昵称:', type: 'TextInput', rules: [{ required: true, message: '昵称不能为空', trigger: ['blur', 'change'] }]},
              {key: 'u_pwd', label: '密码:', type: 'PasswordInput', rules: [{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] }, { min: 6, message: '密码长度最小为6', trigger: ['blur', 'change']}]},
              {key: 'role_id', label: '角色:', type: 'SelectInput', list: [], optionName: 'role_name', optionValue: 'id', rules: [{ required: true, message: '角色不能为空', trigger: ['blur', 'change'] }]},
              {key: 'email', label: '邮箱:', type: 'TextInput', rules: [{ required: true, message: '邮箱不能为空', trigger: ['blur', 'change'] }, {validator: this.emailCheck, trigger: ['blur', 'change']}]},
            ]
          },
        },
        // 表格配置
        tableOption: {
          tableData: [],
          columnOption: [
            {label: '用户名', prop: 'u_name', },
            {label: '昵称', prop: 'nick_name', },
            {label: 'token', prop: 'token', },
            {label: '角色id', prop: 'role_id', },
            {type: 'OperationEditAndDelete'},
          ],
        },
        // 修改弹窗
        updateDialogOption: {
          editFunction: this.editApi,
          width: '520px',
          formOption: {
            labelPosition: 'right',
            isNull: ['u_pwd'],
            formItemOption: [
              {key: 'id'},
              {key: 'nick_name', label: '昵称:', type: 'TextInput', rules: [{ required: true, message: '昵称不能为空', trigger: ['blur', 'change'] }]},
              {key: 'u_pwd', label: '密码:', type: 'PasswordInput', placeholder: '空则默认为不修改密码'},
              {key: 'role_id', label: '角色:', type: 'SelectInput', list: [], optionName: 'role_name', optionValue: 'id', rules: [{ required: true, message: '角色不能为空', trigger: ['blur', 'change'] }]},
              {key: 'email', label: '邮箱:', type: 'TextInput', rules: [{ required: true, message: '邮箱不能为空', trigger: ['blur', 'change'] }, {validator: this.emailCheck, trigger: ['blur', 'change']}]},
            ]
          }
        },
        deleteApi: this.deleteApi,
        getApi: this.getApi
      },
      // 测试数据
      testData: [
        {id: 1 ,u_name: '用户1', nick_name: '用户1昵称', u_pwd: '123', token: 'sadgs54h6asd5f7haw45ha1sdf2' , role_id: 1, email: '386764513@12.com'}
      ]
    }
  },
  methods: {
    // 获取数据
    getApi(param) {
      // demo
      return Promise.resolve([this.testData, this.testData.length])

      // 实际使用
      // return userList(param).then(res => {
        // if (res.code == 200) 
        // return Promise.resolve([res.data, res.count])
        // else return  Promise.reject(res)
      // })
    },
    // 添加api
    addApi(param) {
      // demo
      param.id = this.testData.length + 1
      param.token = Math.random().toString(36).substr(2,10)
      this.testData.push(param)
      this.$refs.generalEdit.paramChange()
      return Promise.resolve()

      // 实际使用
      // return userRegister(param).then(res => {
      //   if (res.code == 200) {
          // this.$refs.generalEdit.paramChange()
          // return Promise.resolve()
        // }
        // else return Promise.reject(res)
      // })
    },
    // 修改api
    editApi(param){
      // demo
      const index = this.testData.findIndex(item => item.id === param.id)
      for (const key of Object.keys(param)) {
        this.testData[index][key] = param[key]
      }
      this.$refs.generalEdit.paramChange()
      return Promise.resolve()
    
      // 实际使用
      // return userUpdate(param).then(res => {
      //   if (res.code == 200) {
          // this.$refs.generalEdit.paramChange()
          // return Promise.resolve()
        // }
        // else return Promise.reject(res)
      // })
    },
    // 删除api
    deleteApi({id}) {
      // demo
      this.testData.splice(id-1,1)
      this.$refs.generalEdit.paramChange()
      return Promise.resolve()

      // 实际使用
      // return userDelete({id: id}).then(res => {
        // if (res.code == 200){
          // this.$refs.generalEdit.paramChange()
          // return Promise.resolve()
        // }
        // else return Promise.reject(res)
      // })
    },
    // 邮箱验证
    emailCheck(rule, value, callback) {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (mailReg.test(value)) {
        callback()
      }else {
        callback(new Error('邮箱格式不正确'))
      }
    }
  },
  mounted() {
    // 获取角色列表
    // demo
    const typeArr = ['addDialogOption','updateDialogOption']
    for (const type of typeArr) {
      this.generalEdit[type].formOption.formItemOption.find(item => item.key === 'role_id').list = [
        {role_name: '管理员', id: 1},
        {role_name: '普通用户', id: 2}
      ]
    }

    // 实际使用
    // roleList({search:'',page:1,size:10000,sort:'role_name',order:'asc'}).then((res) => {
    //   if (res.code == 200) {
        // const typeArr = ['addDialogOption','updateDialogOption']
        // for (const type of typeArr) {
        //   this.generalEdit[type].formOption.formItemOption.find(item => item.key === 'role_id').list = res.data
      // }else {
      //   this.$message({
      //     type: 'error',
      //     message: '请求角色列表失败'
      //   })
      // }
    // })
  },
}
</script>

<style>

</style>
